<template>
  <div>
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span>
        {{ pgTitle }}
      </p>

      <div id="nav_go5">
        <el-button
          type="info"
          icon="el-icon-back"
          class="btn_fanhui"
          @click="revert()"
        >返回
        </el-button
        >
      </div>
    </div>
    <!-- 头部 --end-->

    <!-- 合同信息 --start-->
    <div class="bigbox">
      <div class="conter_box1" :data="ListData">
        <p>合同信息</p>
        <ul>
          <li>
            <span>订单编号</span>
            <el-input
              v-model="ListData.orderNumber"
              style="width: 70%"
              :disabled="true"
            ></el-input>
          </li>
          <li>
            <span>合同批号</span>
            <el-input
              v-model="ListData.contractNumber"
              style="width: 70%"
              :disabled="true"
            ></el-input>
          </li>
          <li>
            <span>订单类型</span>
            <el-input
              v-model="ListData.orderType"
              style="width: 70%"
              :disabled="true"
            ></el-input>
          </li>
          <li>
            <span>合同类型</span>
            <el-input v-model="ListData.contractType" style="width: 70%" :disabled="true"></el-input>
          </li>

          <li>
            <span>交货日期</span>
            <el-date-picker
              v-model="ListData.jiaohuoTime"
              type="date"
              placeholder="选择日期"
              style="width: 70%"
              value-format="yyyy-MM-dd"
              :disabled="true"
            >
            </el-date-picker>
          </li>
          <li>
            <span>签单人员</span>
            <el-input v-model="ListData.qiandanRenyuan" style="width: 70%" :disabled="true"></el-input>
          </li>
          <li>
            <span>企业名称</span>
            <el-input v-model="ListData.clientName" style="width: 70%" :disabled="true"></el-input>
          </li>
          <li>
            <span>联系人员</span>
            <el-input v-model="ListData.lianxiren" style="width: 70%" :disabled="true"></el-input>
          </li>
          <li>
            <span>联系方式</span>
            <el-input v-model="ListData.phone" style="width: 70%" :disabled="true"></el-input>
          </li>
          <li>
            <span>签订日期</span>
            <el-date-picker
              v-model="ListData.qiandingTime"
              type="date"
              placeholder="选择日期"
              style="width: 70%"
              value-format="yyyy-MM-dd"
              :disabled="true"
            >
            </el-date-picker>
          </li>
          <!--          <li>-->
          <!--            <span>人员职务</span>-->
          <!--            <el-input v-model="getdate" style="width: 70%" readonly></el-input>-->
          <!--          </li>-->
        </ul>
      </div>
      <!-- 合同信息 --end-->

      <div class="conter-bigbox1">
        <!--左边栏 --start-->
        <div class="conter-bigbox">
          <div class="conter_box3">
            <!-- 付款信息 -->
            <p>付款信息</p>
            <!-- input框 -->
            <template>
              <ul>
                <li>
                  <span>合同金额</span>
                  <el-input
                    v-model="ListData.contractMoney"
                    readonly
                    style="width: 60%"
                    :disabled="true"
                  ></el-input>
                </li>
                <!--                <li>-->
                <!--                  <span>付款方式</span>-->
                <!--                  <el-input-->
                <!--                    v-model="saleordno"-->
                <!--                    readonly-->
                <!--                    style="width: 60%"-->
                <!--                  ></el-input>-->
                <!--                </li>-->
                <li>
                  <span>支付方式</span>
                  <el-input
                    v-model="ListData.pay"
                    readonly
                    style="width: 60%"
                    :disabled="true"
                  ></el-input>
                </li>
                <li>
                  <span>付款时间</span>
                  <el-date-picker
                    v-model="ListData.fukuaiTime"
                    type="date"
                    placeholder="选择日期"
                    style="width: 70%"
                    value-format="yyyy-MM-dd"
                    :disabled="true"
                  >
                  </el-date-picker>
                </li>
              </ul>
            </template>
          </div>
          <!-- 底部盒子 -->
          <div class="conter_box2">
            <p>合同信息</p>
            <el-image v-for=" it in imglist" :key="it" :src="it" style="width: 100px; height: 100px"></el-image>
          </div>
        </div>
        <!-- 右边盒子 -->
        <div class="conter-bigbox2">
          <!-- 产品信息 -->
          <div class="conter_box4">
            <p>产品信息</p>
            <template>
              <el-table
                :data="products"
                stripe
                style="width: 100%"
                class="from-fk"
              >
                <el-table-column prop="productNumber" label="产品编号">
                </el-table-column>
                <el-table-column prop="productName" label="产品名称">
                </el-table-column>
                <el-table-column prop="type" label="产品类型">
                </el-table-column>
                <el-table-column prop="price" label="产品价格">
                </el-table-column>
                <el-table-column prop="danwei" label="单位">
                </el-table-column>
                <el-table-column prop="number" label="需求数量">
                </el-table-column>
                <el-table-column prop="xiaoji" label="小计">
                </el-table-column>
                <el-table-column prop="operation" label="操作">
                  <el-button type="text" @click="dialogTableVisible = true ,getAdd()"
                  >明细
                  </el-button
                  >
                </el-table-column>
              </el-table>
              <el-dialog
                title="发货明细"
                :visible.sync="dialogTableVisible"
                :modal-append-to-body="false"
              >
                <el-table :data="fahuoData">
                  <el-table-column
                    prop="operationTime"
                    label="发货时间"
                  ></el-table-column>
                  <el-table-column
                    prop="number"
                    label="发货数量"
                  ></el-table-column>
                </el-table>
              </el-dialog>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <el-button type="primary" size="medium" @click="tongguo()" v-if="statue == '1' || statue=='false'">确定
      </el-button>
      <el-button size="medium" @click="dialogVisible = true" v-if="statue == '1' || statue=='false'">驳回</el-button>
      <el-button type="info" size="medium" @click="revert()" v-if="statue == '2' ||statue=='true'">返回</el-button>
    </div>
    <!-- 底部按钮 --end-->
    <el-dialog
      title="驳回"
      :visible.sync="dialogVisible"
      width="30%"
      :modal-append-to-body="false">
      <span>驳回理由 : </span>
      <el-input style="width: 80%" v-model="bohui" placeholder="请输入驳回理由"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false ,getbo()">确 定</el-button>
    <el-button @click="dialogVisible = false">取 消</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      imgprev: '',
      imglist: [],
      input: "",
      dialogVisible: false,
      tableData: [{}],
      gridData: [{}],
      dialogTableVisible: false,
      bohui: "",
      ListData: {

        orderNumber: "",
        contractNumber: "",
        orderType: "",
        contractType: "",
        jiaohuoTime: "",
        qiandanRenyuan: "",
        clientName: "",
        lianxiren: "",
        phone: "",
        qiandingTime: "",
        contractMoney: "",
        pay: "",
        fukuaiTime: "",
        contractAdress: [],
      },
      products: [],
      fahuoId: "",
      fahuoData: [],
      edit: "",
      pgTitle: "订单详情",
      statue: "1",
    };
  },
  created() {
    this.userId = JSON.parse(localStorage.getItem("message")).Id;
    this.userName = JSON.parse(localStorage.getItem("message")).Name;
    this.getList(this.$route.query.id, this.$route.query.checkFolwId)
    this.statue = this.$route.query.statue;
    console.log(this.$route.query)
    console.log(this.statue)
    if (this.statue == "2" || this.statue == "true") {
      this.pgTitle = "订单详情";
    } else if (this.statue == "1" || this.statue == "false") {
      this.pgTitle = "订单审核";
    }
  },
  methods: {
    getList(id) {
      axios
      (
        "/JX_java/procurement/caigoushenghe/getshengHeDetails?shengheMessageId=" + this.$route.query.id + "&&checkFlowId=" + this.$route.query.checkFolwId
      )
        .then((res) => {
          let ttm = '';
          let iis = (res.data.data.pojo.pay || []);
          if (iis.length != 0) {
            let ssd = JSON.parse(iis);
            for (let j = 0; j < ssd.length; j++) {
              ttm += ttm == '' ? ssd[j] : '-' + ssd[j]
            }
          }
          res.data.data.pojo.pay = ttm
          this.imglist = []
          this.ListData = res.data.data.pojo;
          this.products = res.data.data.pojo.products
          let tempaarr = JSON.parse(res.data.data.pojo.contractAdress)
          for (let i = 0; i < tempaarr.length; i++) {
            if (tempaarr[i] || null != null) {
              this.imglist.push(tempaarr[i].url)
            }
          }
        });
    },

    getAdd(id) {

      for (let i = 0; i < this.products.length; i++) {

        this.fahuoId = this.products[i].id
      }

      axios
      (
        "/JX_java/sales/orderFrom/getProductDetails?sofpId=" +
        this.fahuoId
      )
        .then((res) => {
          this.fahuoData = res.data.data
          console.log(this.fahuoData)
        });
    },

    //通过
    tongguo() {
      const arr = {
        "bohui": "",
        "checkFolwId": this.$route.query.checkFolwId,
        "shengheMessageId": this.$route.query.id,
        "status": 3,
        "userId": this.userId,
        "userName": this.userName
      }
      // return
      axios
        .post(
          "/JX_java/procurement/caigoushenghe/updatestatus", arr
        )
        .then((res) => {
          if (res.data.data == "操作成功") {
            this.$message.success(res.data.data);
            this.$router.go(-1);
          } else {
            this.$message.error(res.data.data);
          }
        });
    },

    // 驳回函数
    getbo() {
      if (this.bohui == "") {
        this.$message.error("驳回理由不能为空！");
        return;
      }
      const arr = {
        "bohui": this.bohui,
        "checkFolwId": this.$route.query.checkFolwId,
        "shengheMessageId": this.$route.query.id,
        "status": 2,
        "userId": this.userId,
        "userName": this.userName,
      }
      // return
      axios
        .post(
          "/JX_java/procurement/caigoushenghe/updatestatus", arr
        )
        .then((res) => {
          if (res.data.data == "操作成功") {
            this.$message.success(res.data.data);
            this.$router.go(-1);
          } else {
            this.$message.error(res.data.data);
          }
        });
    },

    //返回
    revert() {
      this.$router.go(-1);
    },

  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.bigbox {
  width: 98%;
  margin-left: 17px;
}

.ryuan {
  width: 20%;
  margin-top: 10px;
  padding-left: 1%;

  p {
    height: 40px;
  }
}

.nav {
  height: 60px;
  padding: 0 1%;
  position: relative;
  font-size: 20px;

  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;

    span {
      background: $Header_color;
      color: $Header_color;
    }
  }

  #nav_go5 {
    position: absolute;
    top: 5px;
    right: 1%;

    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}

.step {
  width: 50%;
  position: absolute;
  top: 0;
  left: 25%;
}

.conter_box1 {
  background: $white;
  height: 280px;
  width: 98%;
  padding: 5px 1% 0 1%;

  p {
    padding-top: 20px;
    height: 40px;
    // margin-top: 10px;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 10px;
  }

  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #909399;

    li {
      width: 33%;
      font-size: 14px;
      margin-bottom: 10px;
      text-align: center;
      span{
        display: inline-block;
        width: 25%;
      }
    }
  }
}

.color_box {
  width: 5px;
  height: 20px;
  background-color: $blue;
  position: absolute;
  top: 22px;
  left: 10px;
}

.conter-bigbox {
  width: 30%;
  display: inline-block;
}

.conter-bigbox1 {
  display: flex;
  justify-content: space-between;
}

.conter_box2 {
  background: $white;
  height: 200px;
  // width: 30%;
  margin-top: 20px;
  // margin: 0;
  padding: 5px 1% 0 1%;
  // display: inline-block;

  p {
    height: 40px;
    margin-top: 10px;
    border-bottom: 1px solid #ebeef5;
  }

  .el-image {
    padding-left: 20px;
    margin-top: 10px;
  }
}

.conter_box3 {
  background: $white;
  //height: 350px;
  // width: 30%;
  margin-top: 20px;

  padding: 5px 1% 0 1%;
  // display: inline-block;

  p {
    height: 40px;
    margin-top: 10px;
    // margin-top: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
  }

  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #909399;
    margin-top: 10px;

    li {
      width: 50%;
      font-size: 14px;
      margin-bottom: 10px;
    }
  }

  .from-fk {
    font-size: 16px;
  }

  /deep/ .cell {
    font-size: 14px !important;
    color: #999999;
    text-align: center;
    padding: 0;
  }

  /deep/ .el-table th {
    background-color: #fff;
  }
}

.conter-bigbox2 {
  width: 68%;
  display: inline-block;
  // height: 1000px;
}

.conter_box4 {
  background: $white;
  margin-top: 10px;
  padding: 5px 1% 0 1%;
  margin-top: 20px;

  p {
    height: 40px;
    margin-top: 10px;
    border-bottom: 1px solid #ebeef5;
  }

  /deep/ .cell {
    font-size: 14px !important;
    color: #999999;
    text-align: center;
    padding: 0;

    button {
      border: 0;
      background-color: #fff;
    }
  }

  /deep/ .el-table th {
    background-color: #fff;
  }
}

.conter_box5 {
  background: $white;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;

  p {
    height: 40px;
    margin-top: 10px;
    border-bottom: 1px solid #ebeef5;
  }

  /deep/ .cell {
    font-size: 14px !important;
    color: #999999;
    text-align: center;
    padding: 0;

    button {
      border: 0;
      background-color: #fff;
    }
  }

  /deep/ .el-table th {
    background-color: #fff;
  }
}

.el-dialog {
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #909399;
    margin-top: 10px;
    margin-left: 15px;

    li {
      width: 30%;
      font-size: 14px;
      margin-bottom: 10px;
      margin-right: 10px;
      margin-top: 20px;
    }
  }
}

.bottom {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;

  p {
    width: 20%;
    line-height: 40px;
    position: absolute;
    top: 30px;
    left: 1%;
    display: flex;
    justify-content: space-between;
  }
}
</style>
<style>
/* .el-dialog__footer {
  text-align: center;
}

.el-input__inner {
  font-size: 12px;
}
#conter_box5 .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
#conter_box5 .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
#conter_box5 .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
#conter_box5 .avatar {
  width: 80px;
  height: 80px;
  display: block;
} */
</style>
